<template>
  <view class="container-login">
    <!-- 图标区域 -->
    <view class="icon-box">
      <!-- 登录后的头像 -->
      <img  :src="avatarUrl" class="avatar" v-if="avatarUrl" alt="">
      <!-- 未登录的头像 -->
     <u-icon size="120px" name="account-fill" v-else></u-icon>
    </view>
    <!-- 点击按钮区域 -->
    <u-button type="success"  text="一键登录" @click="login"></u-button>
    <text class="tips-text">登录后享更多权益</text>
  </view>
</template>

<script>
  import {mapMutations} from 'vuex'
  export default {
    name:"M-Login",
    data() {
      return {
        nickname:'',
        avatarUrl:'',
        code:''
      };
    },
    methods:{
      ...mapMutations('m_user',['updateToken','updateUserInfo']),
      // 登录按钮的处理事件
      login(){
        var that=this
        uni.getUserProfile({
          desc:'登录获取userinfo',
          success:(res)=> {
            // console.log('getUserProfile',res)
            that.nickname=res.userInfo.nickname//用户名
            that.avatarUrl=res.userInfo.avatarUrl//用户头像
            // 将用户的信息保存到vuex中
            this.updateUserInfo(res.userInfo)
            // 调用登录接口，请求接口
            uni.login({
              provider:'weixin',//登录接口的类型
              success:(res)=>{
                // console.log('login',res)
                that.code=res.code
                // 请求登录数据
                if(res.errMsg == 'login:ok'){
                  uni.showToast({
                    title:'登录成功',
                    icon:'success',
                  })
                   uni.request({
                     // 获取到token值
                          url: 'https://api.weixin.qq.com/cgi-bin/token',
                          data: {
                            grant_type:'client_credential',
                            appid:'wxfae3a391f20add1c',
                            secret:'f9dd2f5970746cbf306806a8cadca375'
                          },
                          method:'GET',
                          success:res=>{
                            // console.log('request',res)
                            // console.log(res.data.access_token)
                            // 将token值存放到vuex中
                            this.updateToken(res.data.access_token)
                          }
                        })
                }
              }
            })
          },
          fail:()=>{
          uni.$showMsg('登录失败')
          }
        })
        
      }
    }
  }
</script>

<style lang="scss">
.container-login{
  height: 750rpx;
  background-color: #F8F8F8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  &::after{
    content: ' ';
    width: 100%;
    height: 40px;
    background-color: white;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 100%;
    transform: translateY(50%);
  }
  .icon-box{
    border: 4px solid white;
    border-radius: 100%;
    padding: 5px;
   margin-bottom: 30px;
   .avatar{
     width: 120px;
     height: 120px;
     border-radius: 50%;
   }
  }
  .tips-text{
    font-size: 12px;
    color: gray;
    margin-top: 4px;
  }
}
</style>